<script setup>
import { formatDate } from "@/utils/formatDate";
import addB from "./add.vue";
import editB from "./edit.vue";
import { queryList, deleteItem } from "../service";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	list: {
		type: Array,
	},
	codeText: {
		type: [String, Number],
		required: true,
		default: "",
	},
	id: {
		type: Number,
		default: 0,
	},
});

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", !!val);
	},
});
const onCancel = () => {
	emit("update:modelValue", false);
};

const dpid = computed(() => props.id);

const table = reactive({
	loading: false,
	list: [],
	pagination: {
		total: 0,
		pageNum: 1,
		pageSize: 10,
	},
});
// 新增
const adminId = ref();
const addVisible = ref(false);
const handAddChange = () => {
	addVisible.value = true;
};
// 编辑
const editVisible = ref(false);
const handEditChange = (id) => {
	adminId.value = id;
	editVisible.value = true;
};

// 列表数据
const getList = async (pageNum, pageSize) => {
	table.loading = true;
	try {
		const response = await queryList({
			pageSize: pageSize || table.pagination.pageSize,
			pageNum: pageNum,
			code: props.codeText,
		});
		const { data } = response;
		//treeList.value = [{ id: 0, name: "顶级字典", children: [...(data.records || [])] }];
		table.list = data.records || [];
		table.pagination = {
			...table.pagination,
			total: data.total || 0,
			pageNum,
		};
	} catch (error) {
		console.log(error);
	}
	table.loading = false;
};

// 删除数据
const handDelChange = (id) => {
	ElMessageBox.confirm("是否删除该字典，请谨慎操作？", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(async () => {
			const response = await deleteItem({
				id,
			});
			const { code, msg } = response;
			if (code === 0) {
				ElMessage({
					message: msg,
					type: "success",
				});
				handleSizeChange();
			} else {
				ElMessage({
					message: msg,
					type: "error",
				});
			}
		})
		.catch((error) => {
			// catch error
			console.log(error);
		});
};

// 刷新数据
const onRefresh = () => {
	handleSizeChange();
};

const handleSizeChange = () => {
	getList(table.pagination.pageNum, table.pagination.pageSize);
};
const handleCurrentChange = (val) => {
	getList(val);
};
</script>
<template>
	<addB v-model="addVisible" :list="list" :dpid="dpid" @refresh="onRefresh" />
	<editB v-model="editVisible" :id="adminId" :list="list" @refresh="onRefresh" />
	<el-dialog
		v-model="visible"
		fullscreen
		destroy-on-close
		:show-close="false"
		@open="getList(1)"
		:before-close="onCancel"
	>
		<template #header>
			<el-row justify="space-between">
				<el-col :span="8" style="font-size: 18px"> 子字典</el-col>
				<el-col :span="8" style="text-align: end">
					<el-button type="primary" @click="handAddChange"
						><template #icon><IconSvg name="add-bold" /> </template> 新增字典</el-button
					>
					<el-button type="primary" plain @click="onCancel">
						<template #icon>
							<IconSvg name="rest" />
						</template>
						返回字典</el-button
					>
				</el-col>
			</el-row>
		</template>
		<div style="width: 99.9%">
			<el-table row-key="id" :data="table.list" v-loading="table.loading" stripe border>
				<el-table-column type="index" label="序号" width="70"> </el-table-column>
				<el-table-column label="字典ID" prop="id"> </el-table-column>
				<el-table-column label="字典编码" prop="code"> </el-table-column>
				<el-table-column label="字典名称" prop="name"> </el-table-column>
				<el-table-column label="字典值" prop="value"> </el-table-column>
				<el-table-column label="备注" prop="note"> </el-table-column>
				<el-table-column label="排序" prop="sort"> </el-table-column>
				<el-table-column label="创建时间" prop="createTime">
					<template #default="{ row }">
						{{ formatDate(row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column label="更新时间" prop="updateTime">
					<template #default="{ row }">
						{{ formatDate(row.updateTime) }}
					</template>
				</el-table-column>
				<el-table-column label="操作" prop="action" width="160">
					<template #default="{ row }">
						<el-button type="primary" link @click="handEditChange(row.id)"
							><template #icon><IconSvg name="edit" /></template>编辑</el-button
						>
						<el-button type="danger" link @click="handDelChange(row.id)"
							><template #icon><IconSvg name="delete" /></template>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="padding-t10 display-flex-end">
			<el-pagination
				background
				layout="total,sizes, prev, pager, next"
				v-model:current-page="table.pagination.pageNum"
				v-model:page-size="table.pagination.pageSize"
				:page-sizes="[10, 20, 30, 40, 50]"
				:total="table.pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
	</el-dialog>
</template>
